// 定义底部导航的组件
import React from 'react'
import { FC } from 'react'
import { NavBar, TabBar } from 'antd-mobile'
// 引入路由组件
import {
    Route,
    Routes,  //router5版本是Switch 
    useNavigate,  //router5版本是useHistory()路由编程式导航跳转
    useLocation,
    MemoryRouter as Router,
} from 'react-router-dom'
// 引入icon图标
import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
// 引入样式
import '../assert/tabbar.scss'
type Props = {}

export default function TabBarCom(props: Props) {
        const navigate = useNavigate()
        const location = useLocation()
        const { pathname } = location
        const setRouteActive = (value: string) => { navigate(value) }

        const tabs = [
            {
                key: '/home',
                title: '首页',
                icon: <AppOutline />,
            },
            {
                key: '/cart',
                title: '购物车',
                icon: <UnorderedListOutline />,
            },
           
            {
                key: localStorage.getItem('userid')? '/mine':'/login',
                title: localStorage.getItem('userid')? '我的':'登录',
                icon: <UserOutline />,
            },
        ]
        return (
            <TabBar activeKey={pathname}
             onChange={value => setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        )
}